<template>
  <div>
    <div class="content">
        <!--后勤相关事件-->
         <div class="qjybname">后勤相关事件</div>
          <div class="block" style="margin-top: 0.5%;">
            <el-form ref="basicForm" :model="basicForm" label-width="140px">
              <el-form-item label="后勤相关事件" :rules="[{required: true, message: '后勤相关事件未选择'}]">
                <el-radio-group v-model="basicForm.logisticalRelatedEvent"  onclick="return false">
                  <el-radio label="01">患者转运</el-radio>
                  <el-radio label="02">物品转运</el-radio>
                  <el-radio label="03">废弃物处理</el-radio>
                  <el-radio label="04">水电气空调</el-radio>
                  <el-radio label="05">公共设施</el-radio>
                  <el-radio label="06">环境</el-radio>
                  <el-radio label="07">营养与饮食</el-radio>
                  <el-radio label="08">其他</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
      <el-divider></el-divider>
        <!--事件情况描述-->
        <div ref="block1"></div>
          <div class="qjybname">事件情况描述</div>
          <div class="block" style="margin-top: 0.5%;">
            <el-form ref="reportForm" :model="reportForm" :rules="rules"  label-width="140px">
              <el-form-item label="事件描述或事件经过"  style="width: 600px" prop="situationEdescriptionProcess" :rules="[{required: true, message: '事件描述或事件经过未填写'}]">
                <el-input type="textarea" :rows="5" v-model="reportForm.situationEdescriptionProcess"
                          resize="none" placeholder="请输入内容" :readonly="true"></el-input>
              </el-form-item>
              <el-form-item label="事件发生时是否采取处理措施" prop="situationMeasuresEvent" :rules="[{required: true, message: '是否采取处理措施未选择'}]">
                <el-radio-group v-model="reportForm.situationMeasuresEvent" onclick="return false">
                  <el-radio label="01">是</el-radio>
                  <el-radio label="02">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="采取的处理措施" prop="situationTakenMeasures" >
                <el-input type="textarea" :rows="5" v-model="reportForm.situationTakenMeasures"
                          resize="none" placeholder="请输入内容" :readonly="true"></el-input>
              </el-form-item>
            </el-form>
          </div>
      <el-divider></el-divider>

        <!--患者资料-->
        <div ref="block2"></div>
          <div class="qjybname">患者资料</div>
          <div class="block" style="margin-top: 0.5%;">
            <el-form ref="reportform1" :model="reportForm" :rules="rules" label-width="140px">
              <el-form-item label="是否涉及患者" prop="patientInvolved" :rules="[{required: true, message: '是否涉及患者未选择'}]">
                <el-radio-group v-model="reportForm.patientInvolved" onclick="return false">
                  <el-radio label="01">是</el-radio>
                  <el-radio label="02">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="诊断类别" prop="patientDiagnosisCategory" :rules="[{required: true, message: '诊断类别未选择'}]">
                <el-radio-group v-model="reportForm.patientDiagnosisCategory" onclick="return false">
                  <el-radio label="01">急诊</el-radio>
                  <el-radio label="02">门诊</el-radio>
                  <el-radio label="03">住院</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="病历号/门诊号" style="width: 600px" prop="patientRecordOutpatient" :rules="[{required: true, message: '病历号/门诊号未填写'}]">
                <el-input v-model="reportForm.patientRecordOutpatient" :readonly="true"></el-input>
              </el-form-item>
              <el-form-item label="姓名" style="width: 600px" prop="patientName" :rules="[{required: true, message: '姓名未填写'}]">
                <el-input v-model="reportForm.patientName" :readonly="true"></el-input>
              </el-form-item>
              <el-form-item label="性别" prop="patientGender" :rules="[{required: true, message: '性别未选择'}]">
                <el-radio-group v-model="reportForm.patientGender" onclick="return false">
                  <el-radio label="01">男</el-radio>
                  <el-radio label="02">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="出生日期" prop="patientDateOfBirth">
                <el-date-picker
                  v-model="reportForm.patientDateOfBirth"
                  type="date"
                  :readonly="true"
                  placeholder="选择日期">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="年龄" style="width: 600px" prop="patientAge" >
                <el-input v-model="reportForm.patientAge" :readonly="true"></el-input>
              </el-form-item>
              <el-form-item label="年龄阶段" prop="patientAgeStage">
                <div>
                  <dict-tag style="font-size: 15px;color: #dd524d" :options="dict.type.he_patient_age_grades"
                            :value="reportForm.patientAgeStage"/>
                </div>
              </el-form-item>
              <el-form-item label="家属联系电话" style="width: 600px" prop="patientFamilyNumber" >
                <el-input v-model="reportForm.patientFamilyNumber" :readonly="true"></el-input>
              </el-form-item>
              <el-form-item label="入院就诊时间" prop="patientAdmissionTime" >
                <el-date-picker
                  v-model="reportForm.patientAdmissionTime"
                  type="datetime"
                  :readonly="true"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="床号" style="width: 600px" prop="patientBedNumber" >
                <el-input v-model="reportForm.patientBedNumber" :readonly="true"></el-input>
              </el-form-item>
              <el-form-item label="护理级别" prop="patientNursingLevel"  >
                <el-radio-group v-model="reportForm.patientNursingLevel" onclick="return false">
                  <el-radio label="01">特级护理</el-radio>
                  <el-radio label="02">Ⅰ级护理</el-radio>
                  <el-radio label="03">Ⅱ级护理</el-radio>
                  <el-radio label="04">Ⅲ级护理</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="文化程度" prop="patientEducationLevel"  >
                <el-radio-group v-model="reportForm.patientEducationLevel" onclick="return false">
                  <el-radio label="01">研究生</el-radio>
                  <el-radio label="02">大学本科</el-radio>
                  <el-radio label="03">大学专科</el-radio>
                  <el-radio label="04">中专（中技）</el-radio>
                  <el-radio label="05">高中</el-radio>
                  <el-radio label="06">初中</el-radio>
                  <el-radio label="07">小学</el-radio>
                  <el-radio label="08">文盲</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="诊断(多个诊断之间用逗号隔开)" style="width: 600px" prop="patientDiagnosis">
                <el-input type="textarea" :rows="5" v-model="reportForm.patientDiagnosis"
                          resize="none" placeholder="请输入内容" :readonly="true"></el-input>
              </el-form-item>
            </el-form>
          </div>
        <!--事件基本信息-->
        <div ref="block3"></div>
          <div class="qjybname">事件基本信息</div>
          <div class="block" style="margin-top: 0.5%;">
            <el-form ref="reportForm" :model="reportForm" :rules="rules" label-width="140px">
              <el-form-item label="发生时间" prop="occurrenceTime" :rules="[{required: true, message: '发生时间未选择'}]">
                <el-date-picker
                  v-model="reportForm.occurrenceTime"
                  type="datetime"
                  :readonly="true"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="发生日期" prop="occurrenceDate" rules="[{required: true, message: '发生日期未选择'}]">
                <el-date-picker
                  v-model="reportForm.occurrenceDate"
                  type="date"
                  :readonly="true"
                  placeholder="选择日期时间">
                </el-date-picker>
              </el-form-item>
              <el-form-item label="日期类型" prop="occurrenceDateType">
                <el-radio-group v-model="reportForm.occurrenceDateType" onclick="return false">
                  <el-radio label="01">工作日</el-radio>
                  <el-radio label="02">周末</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="发生时段" prop="occurrenceTimePeriod">
                <el-radio-group v-model="reportForm.occurrenceTimePeriod" onclick="return false">
                  <el-radio label="01">上午(08：00-12：00)</el-radio>
                  <el-radio label="02">中午(12：00-14：00)</el-radio>
                  <el-radio label="03">下午(14：00-18：00)</el-radio>
                  <el-radio label="04">上夜(18：00-00：00)</el-radio>
                  <el-radio label="05">下夜(00：00-08：00)</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="发生地点" style="width: 600px" prop="occurrenceLocation">
                <el-input v-model="reportForm.occurrenceLocation" :readonly="true"></el-input>
              </el-form-item>
              <!--上传图片-->
              <el-form-item label="现场照片" prop="occurrenceScenePhotos">
                <image-upload :limit="1" v-model="reportForm.occurrenceScenePhotos" :readonly="true" />
              </el-form-item>
            </el-form>
          </div>
      <el-divider></el-divider>
        <!--当事人资料-->
        <div ref="block4"></div>
          <div class="qjybname">当事人资料</div>
          <div class="block" style="margin-top: 0.5%;">
            <el-form ref="reportForm" :model="reportForm" :rules="rules" label-width="140px">
              <el-form-item label="姓名" style="width: 600px" prop="partyName" :rules="[{required: true, message: '姓名未填写'}]">
                <el-input  v-model="reportForm.partyName"  :readonly="true"></el-input>
              </el-form-item>
              <el-form-item label="年龄" style="width: 600px" prop="partyAge" >
                <el-input  v-model="reportForm.partyAge"  :readonly="true"></el-input>
              </el-form-item>
              <el-form-item label="工作年限" prop="partyYearsOfExperience" >
                <el-radio-group v-model="reportForm.partyYearsOfExperience" onclick="return false">
                  <el-radio label="01"><1年</el-radio>
                  <el-radio label="02">1≤y≤2</el-radio>
                  <el-radio label="03">2≤y≤5</el-radio>
                  <el-radio label="04">5≤y≤10</el-radio>
                  <el-radio label="05">10≤y≤20</el-radio>
                  <el-radio label="06">≥20年</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="类别" prop="partyCategory" >
                <el-radio-group v-model="reportForm.partyCategory" onclick="return false">
                  <el-radio label="01">在编</el-radio>
                  <el-radio label="02">聘用</el-radio>
                  <el-radio label="03">进修</el-radio>
                  <el-radio label="04">实习</el-radio>
                  <el-radio label="05">轮转</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="学历" prop="partyEducation">
                <el-radio-group v-model="reportForm.partyEducation" onclick="return false">
                  <el-radio label="01">中专</el-radio>
                  <el-radio label="02">大专</el-radio>
                  <el-radio label="03">本科</el-radio>
                  <el-radio label="04">硕士</el-radio>
                  <el-radio label="05">其他</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="职务" prop="partyPosition" >
                <el-radio-group v-model="reportForm.partyPosition" onclick="return false">
                  <el-radio label="01">医疗</el-radio>
                  <el-radio label="02">药剂</el-radio>
                  <el-radio label="03">护理</el-radio>
                  <el-radio label="04">医技</el-radio>
                  <el-radio label="05">检验</el-radio>
                  <el-radio label="06">工程技术</el-radio>
                  <el-radio label="07">行政管理</el-radio>
                  <el-radio label="08">后勤保障</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
      <el-divider></el-divider>
        <!--事件结果-->
        <div ref="block5"></div>
          <div class="qjybname">事件结果</div>
          <div class="block" style="margin-top: 0.5%;">
            <el-form ref="reportform" :model="reportForm" :rules="rules" label-width="140px">
              <el-form-item label="纠纷或纠纷隐患可能性" prop="resultsPossibilityDispute" :rules="[{required: true, message: '纠纷或纠纷隐患可能性未选择'}]">
                <el-radio-group v-model="reportForm.resultsPossibilityDispute" onclick="return false">
                  <el-radio label="01">确定有</el-radio>
                  <el-radio label="02">可能有</el-radio>
                  <el-radio label="03">无</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="事件严重程度" prop="resultsEventSeverity" :rules="[{required: true, message: '事件严重程度未选择'}]">
                <div>
                  <dict-tag style="font-size: 15px;color: #dd524d" :options="dict.type.he_event_severity"
                            :value="reportForm.resultsEventSeverity"/>
                </div>
              </el-form-item>
              <el-form-item label="事件分级" style="width: 600px" prop="resultsEventClassification":rules="[{required: true, message: '事件分级程度未选择'}]">
                <el-radio-group v-model="reportForm.resultsEventClassification" onclick="return false">
                  <el-radio label="01" style="margin-top: 10px; margin-bottom: 10px">Ⅰ级事件: 发生错误，造成患者死亡 (包括损害程度I级)</el-radio>
                  <el-radio label="02" style="margin-bottom: 10px">Ⅱ级事件: 发生错误，且造成患者伤害 (包括损害程度E、F、G、H级)</el-radio>
                  <el-radio label="03" style="margin-bottom: 10px">Ⅲ级事件: 发生错误，但未造成患者伤害 (包括损害程度B、C、D级)</el-radio>
                  <el-radio label="04">Ⅳ级事件: 错误未发生 (错误隐患)(包括损害程度A级)</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="伤害严重度" prop="resultsSeverityInjury":rules="[{required: true, message: '事伤害严重度未选择'}]">
                <el-radio-group v-model="reportForm.resultsSeverityInjury" onclick="return false">
                  <el-radio label="01">死亡</el-radio>
                  <el-radio label="02">极度严重</el-radio>
                  <el-radio label="03">重度</el-radio>
                  <el-radio label="04">中度</el-radio>
                  <el-radio label="05">轻度</el-radio>
                  <el-radio label="06">未造成伤害</el-radio>
                  <el-radio label="07">无伤害</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-form>
          </div>
      <el-divider></el-divider>

        <!--报告者信息-->
        <div ref="block6"></div>
          <div class="qjybname">报告者信息</div>
          <div class="block" style="margin-top: 0.5%;">
            <el-form ref="reportForm" :model="reportForm" :rules="rules" label-width="140px">
              <el-form-item label="事件呈报方式" prop="reportMethod" :rules="[{required: true, message: '事件呈报方式未选择'}]">
                <el-radio-group v-model="reportForm.reportMethod" onclick="return false">
                  <el-radio label="01">主动呈报</el-radio>
                  <el-radio label="02">投诉</el-radio>
                  <el-radio label="03">他人报告</el-radio>
                  <el-radio label="04">质量检查发现</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="其他信息备注"  style="width: 600px" prop="reportAttachedImages">
                <el-input type="textarea" :rows="5" v-model="reportForm.reportOtherRemarks"
                          resize="none" placeholder="请输入内容" :readonly="true"></el-input>
              </el-form-item>
              <!--上传图片-->
              <el-form-item label="附件图片" prop="images">
                <image-upload :limit="1" v-model="reportForm.reportAttachedImages" :readonly="true" />
              </el-form-item>
            </el-form>
          </div>
    </div>
    <!--保存按钮-->
<!--    <div style="position: fixed; margin-top: 0.5%; right: 3%; width: 300px">-->
<!--      <el-button-->
<!--        type="primary"-->
<!--        style="margin-left: 15px"-->
<!--        @click="baocun"-->
<!--      >保存-->
<!--      </el-button>-->
<!--      <el-button-->
<!--        type="info" plain-->
<!--        style="margin-left: 15px"-->
<!--        @click="fanhui"-->
<!--      >返回-->
<!--      </el-button>-->
<!--    </div>-->
  </div>
</template>


<script>
import ScrollPane from "@/layout/components/TagsView/ScrollPane";
import { addBasic,getBasic } from "@/api/module/qjy/basic";
export default {
  components: {ScrollPane},
  dicts: ['he_patient_age_grades','he_event_severity',],
  data() {
    return {
      formEvent:{
        //代表是事件基本信息表
        heEventBasic: {},
        //代表事件上传信息表
        heEventReport: {},
        //代表事件流程表
        heEventFlow:{},
      },
      //代表事件基本信息表
      basicForm:{
        //这个就是新增到事件基本信息表的后勤管理事件
        logisticalRelatedEvent: '',
      },
      //代表事件上报信息表
      reportForm:{
        reportEventType:'34',//后勤相关
        reviewEventType:'01',
        //以下都是新增到事件上传信息表的字段
        //事件情况描述
        situationEdescriptionProcess: '',
        situationMeasuresEvent: '',
        situationTakenMeasures: '',
        situationCausesconsequences: '',
        //患者资料
        patientInvolved: '',
        patientDiagnosisCategory: '',
        patientRecordOutpatient: '',
        patientName: '',
        patientGender: '',
        patientDateOfBirth: '',
        patientAge: '',
        patientAgeStage: '',
        patientEthnicGroup: '',
        patientWeight: '',
        patientPreDisease: '',
        patientContact: '',
        patientFamilyNumber: '',
        patientAdmissionTime: '',
        patientDepartment: '',
        patientBedNumber: '',
        patientNursingLevel: '',
        patientEducationLevel: '',
        patientDiagnosis: '',
        //其他情况暂时没有字段以后加这里先写死
        //事件基本信息
        occurrenceTime: '',
        occurrenceDate: '',
        occurrenceDateType: '',
        occurrenceTimePeriod: '',
        occurrenceLocation: '',
        occurrenceScenePhotos: '',
        //当事人资料
        partyName: '',
        partyAge: '',
        partyYearsOfExperience: '',
        partyCategory: '',
        partyEducation: '',
        partyPosition: '',
        partyPost: '',
        //事件结果
        resultsPossibilityDispute: '',
        resultsEventSeverity: '',
        resultsEventClassification: '',
        resultsSeverityInjury: '',
        //报告者信息(上报信息)
        reportMethod: '',
        reportAttachedImages: '',
        reportOtherRemarks: '',
        reportDepartment:'',
        note1:'',
      },
      //代表事件流程表
      flowForm:{},
      //折叠面板
      activeNames: ['1','2','3','4','5','6','7'],

      fileList: []
    }
  },

  // 禁止web端屏幕缩放
  created() {
    //获取上一个页面传过来的id
    const id = this.$route.query.id;
    //通过id查询
    getBasic(id).then(response => {
      //获取后台传过来的表单
      this.formEvent = response.data;
      console.log("111111"+response)
      //将其对应赋值进行表单渲染
      this.basicForm=this.formEvent.heEventBasic
      this.reportForm=this.formEvent.heEventReport
    });
    // window.addEventListener("mousewheel", function (event) {
    //   if (event.ctrlKey === true || event.metaKey) {
    //     event.preventDefault();
    //   }
    // }, {passive: false})
  },
  methods: {
    baocun(){
      this.reportForm.note1 = "后勤相关事件"
      //将代表事件上报信息表的字段内容赋值给heEventReport对象用于连接后台
      this.formEvent.heEventReport = this.reportForm
      //将代表事件基本信息表的字段内容赋值给heEventReport对象用于连接后台
      this.formEvent.heEventBasic = this.basicForm
      //将代表事件基本信息表的字段内容赋值给heEventReport对象用于连接后台
      this.formEvent.heEventFlow = this.flowForm
      addBasic(this.formEvent).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.$router.push({path: "/index"});
      });
    },
    fanhui(){
      this.$router.push({path: "/hosipitalevent/report"});
    },
    //上传图片
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //el 标签  speed 滚动速率 此处是50px 值越大滚动的越快
    goAssignBlock(el, speed) {
      let t = this.$refs[el].offsetTop - 100

      function scrollToTop() {
        let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;

        if (scrollTop > t) {
          window.scrollTo(0, scrollTop - speed);

          // 使用 requestAnimationFrame 进行平滑滚动
          requestId = window.requestAnimationFrame(scrollToTop);
        } else {
          window.scrollTo(0, t);

          // 取消动画帧的请求
          window.cancelAnimationFrame(requestId);
        }
      }

      let requestId = window.requestAnimationFrame(scrollToTop);
    },
  },
  //折叠面板
  handleChange(val) {
    console.log(val);
  }

}

</script>

<style lang="scss" scoped>
@import "src/views/module/shao/blackFont";
.sidebar {
  margin-left: 3%;
  width: 10%;
  float: left;
  display: flex;
}
.content {
  width: 87%;
}

.btn-box {
  position: fixed;
  margin-top: 1%;

  ::v-deep .el-card__body {
    padding: 15px 15px 15px 5px;
  }
}

.btn-box button {
  text-align: left;
  padding: 0 0 0 10px;
  display: block;
  width: 150px;
  height: 40px;
  border: none;
  cursor: pointer;
}

.btn-box button:hover {
  background: hsl(221, 98%, 68%);
  color: white;
}

.block {
  border: 1px solid white;
  width: 100%;
  height: 100%;
  display: flex;
  font-size: 5rem;
  box-sizing: border-box;

  .el-form-item {
    margin-bottom: 10px;
  }
}
.qjybname {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
  font-weight: bold;
  font-size: 20px;
  color: #000;
}


</style>
